window.onload = function() {
    let username = document.getElementById("username")
    let password = document.getElementById("password")
    console.log(username.value)

    username.addEventListener("input", (e) => {
        console.log("正在输入", e.target.value)
    })

    let btn = document.querySelector("button")
    btn.addEventListener("click", (e) => {
        e.preventDefault()

        let name = username.value
        let key = password.value

        //promise 是一种异步编程的解决方案
        let promise = new Promise((resolve, reject) => {
            // let success = success //代表异步操作成功
            // if (success) {
            //     resolve() //成功
            // } else {
            //     reject() //失败拒绝
            // }

            // setTimeout(() => {
            //     console.log("5s过去了")
            //     resolve()
            // }, 5000)

            // let success = true //代表异步操作成功

            // if (name === "qq") {
            //     setTimeout(() => {
            //             console.log("5s过去了")
            //             resolve("你的等待得到了回报")
            //         }, 5000) //成功
            // } else {
            //     setTimeout(() => {
            //             console.log("5s过去了")
            //             reject("你的等待得到了沉默")
            //         }, 5000) //失败拒绝

            // let xhr = new XMLHttpRequest()
            //     //建立连接
            // xhr.open("GET", "http://127.0.0.1:8080/login", true) //打开链接的通道
            //     //异步请求的状态监听
            // xhr.onreadystatechange = () => {
            //     //readyState
            //     //0请求已经创建，但是还没有使用open
            //     // 调用了open，还没发送
            //     // 服务器返回响应头
            //     // 正在读取响应体
            //     // 请求完成，相应可用
            //     if (xhr.readyState === 4 && xhr.status === 200) {
            //         console.log("请求成功了")
            //             // 4.得到响应
            //         resolve(xhr.responseText)
            //     }
            // }
            // console.log("开始发送请求")
            // xhr.send()


            let data = {
                username: name,
                password: key
            }
            let xhr = new XMLHttpRequest()
            xhr.open("POST", "http://127.0.0.1:8080/login", true)
            xhr.setRequestHeader("Content-Type", "application/json")
            xhr.onreadystatechange = () => {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    console.log("请求成功了")
                        // 4.得到响应
                    resolve(xhr.responseText)
                }
            }
            console.log(JSON.stringify(data))
            console.log("开始发送请求")
            xhr.send(JSON.stringify(data)) //把对象形的数据转换成了JSON形
        })
        promise.then((t) => {
            console.log("你输入了正确的name，恭喜你")
            console.log(t)
            setTimeout(() => {
                location.href = "http://172.19.14.60:8080/login"
            }, 5000)

        }).catch((e) => {
            console.log("你输入了错误的name")
            console.log(e)
        }).finally(() => {
            console.log("5s之后，页面会跳转")
        })
    })
}